<template>
  <div id="nav">
     <input type="button" value="get请求" class="get" @click="testGet"/>
    <ul v-if="jokes.length!=0">
        <li v-for="(joke,index) in jokes" :key="joke">
            {{index}}:{{joke}}
        </li>
    </ul>
    <br>
    <input type="button" value="post请求" class="post" @click="testPost" />
    <h2 v-if="registerMsg!=''" style="color:yellow">{{registerMsg}}</h2>
  </div>

</template>


<script>
import axios from 'axios'
export default {
  data() {
    return {
        num:5,
        jokes:[],
        registerMsg:''

    };
  },
  methods: {
      //请求地址:https://api-vue-base.itheima.net/api/joke/list
            //请求方法:get
            //请求参数:num(笑话条数,数字)
            //响应内容:随机笑话（响应状态码、信息、数据）
    testGet(){
      axios.get(`https://api-vue-base.itheima.net/api/joke/list?num=${this.num}`)
            .then(response => {
                    // handle success  此处的response响应对象
                    console.log(response);
                    // response.data包含:status响应状态码，msg响应信息，data响应数据
                    console.log(response.data);
                    // response.data.data 响应数据
                    console.log(response.data.data);
                    //在箭头函数中，this代表vue组件实例
                    console.log(this.jokes)
                    this.jokes = response.data.data
                })
            .catch(function(err){
                console.log(err)
            })
    },
    testPost(){
       axios.post("https://api-vue-base.itheima.net/api/user/reg" , {"username":'Rose'})
            .then(response => {
                    // handle success  此处的response响应对象
                    console.log(response);
                    // response.data包含:status响应状态码，msg响应信息，data响应数据
                    console.log(response.data);
                    console.log(response.data.msg);
                    //在箭头函数中，this代表vue组件实例
                    this.registerMsg=response.data.msg;
                })
            .catch(error=>{
                console.log(error)
            })
    }

  }
};
</script>


<style lang="less" scoped>
#nav li {
  text-align: left;
}
</style>
